<template>
  <div>
    <a-form :form="conditions" layout="inline">
      <a-row type="flex" class="query-conditions">
        <a-col :span="20">
          <a-form-item label="通知类型" prop="type">
            <ait-select v-model="conditions.type" :select="{key: 'SD_NOTIFICATION_TYPE'}">
            </ait-select>
          </a-form-item>
          <a-form-item label="消息创建人" prop="reviewedPerson">
            <a-input v-model="conditions.reviewedPerson" placeholder="请输入消息创建人"></a-input>
          </a-form-item>
          <a-form-item label="是否已读" prop="hasRead">
            <a-select v-model="conditions.hasRead" placeholder="是否已读" defaultValue="0">
              <a-select-option value="1">已读</a-select-option>
              <a-select-option value="0">未读</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="4" class="query-form-btn">
          <a-form-item>
            <a-button type="primary" @click="queryNotification(1)">查询</a-button>
            <a-button @click="resetCondition()">重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-row class="table-body">
      <a-table :columns="tableData.columns" :dataSource="tableData.data" :pagination="tableData.pagination">
        <span slot="createTime" slot-scope="text">{{timestampToFullDate(text)}}</span>
        <template slot="operation" slot-scope="text, index">
          <a-button type="primary" size="small" @click="knowTheNotification(index)">已读</a-button>
        </template>
      </a-table>
    </a-row>
  </div>
</template>

<script>
  import {httpPost, GET_NOTIFICATION_INFO, CONSUMER_NOTIFICATION} from "../../api/api";
  import {timestampToFullDate} from "../../utils/date";
  import AitSelect from "../../components/common/Select";

  export default {
    components: {
      AitSelect
    },
    name: "Notice",
    data() {
      return {
        tableData: {
          data: [],
          columns: [
            {
              title: "消息创建人",
              dataIndex: "creatorName"
            },
            {
              title: "通知类型",
              dataIndex: "notificationTitle"
            },
            {
              title: "通知内容",
              dataIndex: "notificationContent"
            },
            {
              title: "申请时间",
              dataIndex: "createTime",
              width: 200,
              scopedSlots: { customRender: 'createTime' }
            },
            {
              title: "操作",
              dataIndex: "operation",
              width: 200,
              scopedSlots: { customRender: 'operation' }
            }
          ],
          pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            onChange: this.queryNotification
          }
        },
        conditions: {
          reviewedPerson: "",
          type: "0",
          hasRead: "0"
        }
      };
    },
    methods: {
      timestampToFullDate(value) {
        return timestampToFullDate(value);
      },
      knowTheNotification(index) {
        httpPost(CONSUMER_NOTIFICATION, {id: index.notificationId}).then(res => {
          this.$message.success(res);
          this.queryNotification(1);
        })
      },
      resetCondition() {
        this.getNotification(1);
      },
      queryNotification(current) {
        this.tableData.pagination.current = current;
        this.getNotification();
      },
      //调用后台接口来获取数据
      getNotification() {
        let data = {
          creatorName: this.conditions.reviewedPerson,
          type: this.conditions.type,
          hasRead: this.conditions.hasRead
        };
        let params = {
          currentPage: this.tableData.pagination.current,
          pageSize: this.tableData.pagination.pageSize,
          data: data
        };
        httpPost(GET_NOTIFICATION_INFO, params).then(res => {
          this.tableData.pagination.total = res.count;
          this.tableData.data = res.entities;
        });
      }
    },
    created() {
      this.queryNotification(1);
    }
  };
</script>
<style>
</style>
